<template>
  <div class="box">
    <div class="top">
      <van-icon name="arrow-left" class="icon" @click="backRoute" />
      <div class="logo"><b>SENSER</b><span>识季</span></div>
      <div>
        <van-cell @click="showPopup">分享</van-cell>
        <van-popup v-model:show="show" position="bottom" />
      </div>
    </div>
    <div class="li">
      <img :src="topicList.good_img" alt="" />
      <p>{{ topicList.good_brand }}</p>
      <p style="width: 6rem; text-align: center; padding: 0.2rem">
        {{ topicList.good_desc }}
      </p>
      <p>¥{{ topicList.good_price }}</p>
    </div>
    <Genuine></Genuine>
    <div class="content">
      <p>商品详情</p>
      <p><span>商品品牌:</span>{{ topicList.good_brand }}</p>
      <p><span>品牌编号:</span>{{ topicList.good_num }}</p>
      <p><span>品牌颜色:</span>{{ topicList.good_color }}</p>
      <p><span>识季编码:</span>{{ topicList.shiji_num }}</p>
      <p><span>商品成分:</span>{{ topicList.good_brand }}</p>
      <p><span>商品品牌:</span>{{ topicList.good_brand }}</p>
      <p><span>商品品牌:</span>{{ topicList.good_brand }}</p>
      <p><span>商品描述:</span>{{ topicList.good_desc }}</p>
    </div>
    <div class="problem">
      <p>常见问题</p>
      <ul class="menu">
        <li>海外专柜价格为什么低</li>
        <li>购买海外商品到国内大概几天</li>
        <li>商品价格为什么有时候会波动</li>
        <li>如何保证平台的商品都是正品</li>
        <li>是否需要额外支付邮费或税费</li>
        <li>收货之后有问题想退货怎么办</li>
      </ul>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { analyze } from 'eslint-scope';
import { ref, onMounted } from 'vue'
import { getUserList } from "./api"
import { useRoute } from 'vue-router';
const route = useRoute()
const shows = ref<boolean>(true)
const active = ref(0);
const userList = async () => {
    let res = await getUserList()
    UserList.value = res.data
    console.log(res, 'hhh')
}
const onChange = () => {
    shows.value = false
}

<script setup lang="ts">

</script>
<style lang="scss" scoped>
.footer_weibu {
    display: flex;
    justify-items: center;
    width: 1000px;
}

.footer_weibu div {
    height: 20px;
    background: #f8f8f8;
    margin-left: 10px;
    border-radius: 10px;
    text-align: center;
    span {
        font-size: 12px;
        padding: 0px 10px;
    }
}

.topic_top_p {
    padding: 15px 0px 5px 10px;
    float: left;
}

.d3 {
    margin-left: 32px;
    float: left;
    width: 0;
    height: 0;
    border-width: 3px;
    border-style: solid;
    border-color: #ccc transparent transparent transparent;
}

.fotter_bottom {
    display: flex;
    flex-wrap: wrap;
    width: 375px;
    display: flex;
    justify-content: space-around;

    div {
        width: 160px;
        height: 250px;
        // background: #f1f1f1;
        margin-top: 10px;
        text-align: center;
        font-size: 10px;
    }

    p {
        line-height: 20px;
    }

    img {
        width: 160px;
        height: 160px;
    }
}

.topic_top_o {
    text-align: center;
    width: 75%;
    padding: 15px 0px 5px 0px;
    margin-left: 50px;
}

.fist_list {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shixuan_center {
    margin: 0px 10px;
    width: 130px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    color: #ccc;

    :deep .van-dropdown-menu .van-dropdown-menu__bar {
        box-shadow: none;

        .van-ellipsis {
            font-size: 12px;
            padding: 0px 7px;
            color: #999;
        }
    }
}

.left_L {
    li {
        padding: 15px;
        font-size: 14px;
    }
}

<style scoped>

</style>
